﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作DOM-jQuery基础</title>
<style>
.aclss{background: #666;font-size: 2.8rem;}
.aclss2{background: #ff0;font-size: 2.8rem;}
</style>
</head>
<body>
<h1>插入节点</h1>
<ul class="zoomla">
    <li>这里有列表</li>
</ul>
<hr>
<ul class="zoomla2">
    <li>这是第二个列表的第一行，执行`appendTo`后，会将其移到指定的目标节点下</li>
</ul>

<hr>
这是第三行的列表
<div class="a1">内容模型</div>
<div class="a2">文章模型</div>
<hr>
这是第四行的列表，测试`prependTo`语法
<div class="a3">内置强大的OA管理功能</div>
<div class="a4">海量云模板自由建站</div>
<div class="a5" style="display:inline;color: #f00;">集成微软hyper-V虚拟硬件-</div>

<hr>
这是第五行的列表
<div class="a6">我爱编程</div>
<div class="a7">家里有一条河</div>
<div class="a8">山东上格科技</div>
<div class="a9">威海了不起</div>
<div class="a10">我有热水器</div>
<div class="a11">看我们都光着膀子</div>
<div class="a12">专业售房100年</div>
<div class="a13">看你身为南方人，穿着毛尼大衣，缩手缩腿的。</div>

<hr>
<h1>删除节点</h1>
<div id="bz" class=".bz">
<ul id="b001">
<li title="小黑">小黑是天津人</li>
<li title="小孙">孙总是山东人</li>
<li title="阿衡">北方姑娘</li>
</ul>
</div>
<div id="bz2" class=".bz2">
<ul class="b002">
<li title="小黑">小黑是天津人22</li>
<li title="小孙">孙总是山东人22</li>
<li title="阿衡">北方姑娘22</li>
</ul>
</div>

<p>使用detach()方法删除后，不会将匹配的对象从jquery对象中删除，因此将来仍然可以使用这些元素。而remove则不能。</p>
<div id="bz3" class=".bz3">
    <ul class="b003">
    <li class="b004" title="蓝天">蓝天是好的</li>
    <li class="b005" title="海洋">美国有海洋</li>
    <li class="b006" title="老家">老家人大树</li>
    </ul>
    </div>

<p>使用empty()方法，用于将节点清空，可以清空元素中的后代节点（不是删除，只是清空）</p>    
<div id="bz7" class=".bz7">
    <ul class="b008">
    <li class="b009" title="小黑">小黑是天津人22
        <ul class="b012">
            <li class="b-13">wqfweffew</li>
            <li class="b-14">wqfweff2ew</li>
            <li class="b-15">wqfwef3few</li>
            <li class="b-16">wqfweff4ew</li>
            <li class="b-17">wqfweffe6w</li>
            <li class="b-18">wqfweff5ew</li>
        </ul>
    </li>
    <li class="b010" title="小孙">孙总是山东人22</li>
    <li class="b011 title="阿衡">北方姑娘22</li>
    <strong class="b012">视频发你了</strong>
    </ul>
    </div>

    <hr>
    <h1>替换节点</h1>
    <div id="c01">外婆冬天会爱着你</div>
    <div id="c02">她会做出一些美食</div>
    <div id="c03">让我那些清贫的日子不会苦寂</div>

    <hr>
    <h1>each遍历节点</h1>
    <div id="c04">
        <ul>
            <li><img src="images/box.png" /></li>
            <li><img src="images/box2.png" /></li>
            <li><img src="images/box3.png" /></li>
        </ul>
    </div>

    <hr>
    <h1>wrapAll包裹元素</h1>

    <div id="c05">
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus accusantium dolores aperiam perspiciatis incidunt quia rerum, iste repudiandae nesciunt unde a odit explicabo ex reprehenderit aliquid necessitatibus accusamus sit quod?</li>
            <li>Beatae reiciendis eaque, corporis debitis non excepturi harum a dolorem dicta sit quo autem quos culpa magni fugiat sint. Voluptatum nemo suscipit mollitia id est doloribus eum assumenda sit quis?</li>
            <li>Voluptatibus nostrum placeat iure reprehenderit atque dolorum quia perspiciatis, assumenda nam perferendis, quod minus? Quos atque dignissimos magni. Sunt, assumenda! Quo est culpa odio pariatur officiis facilis natus rem expedita.</li>
        </ul>
    </div>
    


<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script>
$(document).ready(function () {
    let $li_1=$(`<li><a href="http://www.z01.com" target="_blank">进入逐浪CMS官网</a></li>`);
    let $li_2=$(`<li>中国最强</li>`);
    let $li_3=$(`<li>专注研发</li>`);
    let $parent=$(`.zoomla`);
    $parent.append($li_1);
    $parent.append($li_2);
    $parent.append($li_3);

    //移到节点到指定节点下
    let $parent2=$(`.zoomla2`);
    $parent2.appendTo($li_2);

    // 在指定节点前插入特定元素
    $(`.a1,.a2`).prepend(`<strong>逐浪CMS内置强大的-></strong>`);
    $(`.a5`).prependTo(`.a4`);

    //在匹配的元素外插入
    $(`.a6`).after(`<strong>老孙你没救，不想说什么，你自惭吧</stron>`);

    // 将所有匹配的元素插入到另一个指定的元素集合后面
    $(`.a7`).insertAfter(`.a10`);

    //在每个匹配的元素前插入
    $(`.a8`).before(`<small>禧园有爱<strong>就这样</strong>是好地方</small>`);

    // 把所有匹配的元素插入到另个指定元素的集合前面
    $(`.a13`).insertBefore(`.a12`);

    // ------------------------ 删除节点
    $(`.b002 li`).remove(`li[title=小黑]`);

    // 使用detach方法
    $(`.b003 li`).detach(`li[title=老家]`);

    //使用empty()方法清空后代节点,这不是删除，只是清空
    $(`.b012 li`).empty();

    //复制节点
    $(`.b012`).clone().prependTo(`.b010`);

    // 替换节点
    $(`#c01`).replaceWith(`<p style="color:#f09;">所以，我一直思念着你</p>`);
    $(`<p style="color:#f09;">使用replaceAll元素前置用于替换</p>`).replaceAll(`#c02`);

    //each遍历节点
    $(`#c04 img`).each(function (index) {
        $(this).attr(`title`,`第`+(index+1)+`张图片`);
        $(this).after(`这是`,`第`+(index+1)+`张图片`);
    })

    //wrapAll()包裹元素
    $(`#c05 li`).wrapAll(`<strong></strong>`);
    $(`#c05 li`).eq(0).wrap(`<b></b>`);

})



</script>

</body>
</html>
